﻿<Page
    x:Name="pageRoot"
    x:Class="PuzzleModern.GamePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PuzzleModern"
    xmlns:common="using:PuzzleModern.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    SizeChanged="pageRoot_SizeChanged"
    mc:Ignorable="d"
    PointerPressed="pageRoot_PointerPressed"
    PointerMoved="pageRoot_PointerMoved"
    PointerReleased="pageRoot_PointerReleased"
    PointerCanceled="pageRoot_PointerReleased"
    PointerCaptureLost="pageRoot_PointerReleased" 
    >

    <Page.Resources>
        <Storyboard x:Name="BusyOverlayAppearingStoryboard">
            <DoubleAnimation
                Storyboard.TargetName="BusyOverlay"
                Storyboard.TargetProperty="Opacity"
                From="0"
                To="0.8"
                Duration="0:0:1"
                Completed="DoubleAnimation_Completed"
                >
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="BusyOverlayDisappearingStoryboard">
            <DoubleAnimation
                x:Name="BusyOverlayDisappearingAnimation"
                Storyboard.TargetName="BusyOverlay"
                Storyboard.TargetProperty="Opacity"
                Duration="0:0:0.5"
                From="0.8"
                To="0"
                Completed="BusyOverlayDisappearingAnimation_Completed"
                >
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="ErrorAppearingStoryboard">
            <ColorAnimation
                    EnableDependentAnimation="true"
                    Storyboard.TargetName="PromptPopupErrorLabel"
                    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                    Duration="0:0:1"
                    From="Red"
                    To="DarkRed"
                    />
        </Storyboard>
    </Page.Resources>

    <!--
        * Row 0 contains the back button and page title
        * Row 1 contains the drawing canvas and the border
        * Row 2 contains the virtual keyboard and the undo/redo buttons
    -->

    <Grid x:Name="MainGrid" Background="{Binding PageBackground}" RequestedTheme="Light">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="70"/>
        </Grid.RowDefinitions>

        <!-- Actual Game view -->
        <Grid Grid.Row="1" x:Name="contentRegion">
            <Border x:Name="GameBorder" Background="{Binding PageBackground}" Margin="0" SizeChanged="GameBorder_SizeChanged">
                <local:Direct2DPuzzleCanvas x:Name="DrawCanvas" Width="800" Height="800"
                                  IsRightTapEnabled="True"
                                  RightTapped="DrawCanvas_RightTapped"
                                  PointerPressed="DrawCanvas_PointerPressed"
                                  />
            </Border>
            <Border x:Name="BusyOverlay" Background="{Binding PageBackground}">
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="80" />
                    </Grid.RowDefinitions>
                    <ProgressRing x:Name="BusyIndicator" Foreground="Black" Width="60" Height="60" Margin="0,40,20,0"/>
                    <TextBlock x:Name="BusyLabel" Foreground="Black" FontSize="42" Grid.Column="1" VerticalAlignment="Center" Margin="0,40,0,0"></TextBlock>
                    <Button x:Name="BusyCancelButton" Content="Cancel" Grid.Row="1" Grid.ColumnSpan="2" FontSize="30" HorizontalAlignment="Center" Margin="0,20,0,0" Click="BusyCancelButton_Click" />
                </Grid>
            </Border>
        </Grid>

        <!-- Virtual keyboard -->
        <Grid Grid.Row="2">

            <!-- TODO: Resize to 2 rows when the window is smaller -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <ItemsControl x:Name="VirtualButtonBar" Grid.Column="0" ItemsSource="{Binding Buttons}" Padding="0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Content="{Binding Name}" Click="ButtonBar_Click" FontSize="24" IsTabStop="False" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            
        </Grid>

        <StackPanel x:Name="LeftRightGrid" Orientation="Horizontal" HorizontalAlignment="Left" Visibility="Collapsed" Grid.Row="2" Margin="{Binding LargePageUndoMargin}">
            <AppBarToggleButton x:Name="ButtonLeftRight" IsCompact="True" Icon="Edit" Checked="ButtonLeftRight_Checked" Unchecked="ButtonLeftRight_Unchecked" IsTabStop="False" />
            <TextBlock x:Name="LabelLeftRight" Text="?" Margin="0,20,0,0"  Style="{StaticResource BodyTextBlockStyle}" Tapped="LabelLeftRight_Tapped" Height="40" VerticalAlignment="Top" />
        </StackPanel>
        
        <StackPanel x:Name="UndoGrid" Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="2" Margin="{Binding LargePageUndoMargin}">
            <AppBarButton x:Name="ButtonUndo" ToolTipService.ToolTip="Undo" Label="Undo" Icon="Undo" IsCompact="True" Click="ButtonUndo_Click" IsTabStop="False"/>
            <AppBarButton x:Name="ButtonRedo" ToolTipService.ToolTip="Redo" Label="Redo" Icon="Redo" IsCompact="True" Click="ButtonRedo_Click" IsTabStop="False"/>
        </StackPanel>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="80"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="19,15,19,14" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button" IsTabStop="False"/>
            <TextBlock x:Name="pageTitle" Text="{Binding PuzzleName}" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,10,20"/>
            <TextBlock x:Name="StatusBar" Text="" Grid.Column="2" VerticalAlignment="Center" FontSize="18" />
            <AppBarButton x:Name="ButtonMenu" Click="ButtonMenu_Click" Margin="0,2,0,0"
                        Grid.Column="3" Icon="More" ToolTipService.ToolTip="Menu"
                        VerticalAlignment="Top" IsTabStop="False">
            </AppBarButton>
        </Grid>

        <!-- Game ID Popup -->
        <Border x:Name="PromptPopupBackground" Background="#7F000000" Grid.RowSpan="3" Visibility="Collapsed"></Border>
        <Popup x:Name="PromptPopup" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" Closed="PromptPopup_Closed">
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PopupThemeTransition/>
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Border x:Name="PromptPopupBorder" HorizontalAlignment="Stretch" VerticalAlignment="Center" MinHeight="200" Padding="100,25" RequestedTheme="Light" Background="White">
                <StackPanel>
                    <TextBlock x:Name="PromptPopupHeader" FontSize="22" />
                    <TextBox x:Name="PromptPopupText" FontFamily="Consolas" Margin="0,15,0,0" IsTextPredictionEnabled="False" />
                    <TextBlock x:Name="PromptPopupErrorLabel" FontSize="20" Foreground="Red" FontWeight="Bold" TextWrapping="Wrap" Margin="0,15,0,0" />
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                        <Button x:Name="PromptPopupButtonOK" Content="OK" Click="PromptPopupButtonOK_Click"/>
                        <Button x:Name="PromptPopupButtonCancel" Content="Cancel" Click="PromptPopupButtonCancel_Click"/>
                    </StackPanel>
                </StackPanel>
            </Border>
        </Popup>
    </Grid>
    
    <!-- TODO: Suppress the appbar when the popup is visible -->
    
    <Page.TopAppBar>
        <AppBar Background="Black">
            <GridView
                x:Name="PresetGridView"
                ItemsSource="{Binding}"
                HorizontalAlignment="Center"
                IsItemClickEnabled="True"
                ItemClick="PresetGridView_ItemClick"
                SelectionMode="None"
                LayoutUpdated="PresetGridView_LayoutUpdated"
                >
                
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" Padding="15" MinWidth="80" TextAlignment="Center" FontSize="14" />
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
            
        </AppBar>
    </Page.TopAppBar>

    <Page.BottomAppBar>
        <AppBar Background="#333" Closed="BottomAppBar_Closed">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <AppBarButton x:Name="ButtonNew" Icon="Add" Label="New" Click="ButtonNew_Click"/>
                    <AppBarButton x:Name="ButtonSpecific" Icon="Save" Label="Load/Save">
                        <AppBarButton.Flyout>
                            <MenuFlyout>
                                <MenuFlyoutItem Text="Load game" Click="SpecificLoadGame_Click"/>
                                <MenuFlyoutItem Text="Save game" Click="SpecificSaveGame_Click"/>
                                <MenuFlyoutSeparator />
                                <MenuFlyoutItem Text="Share" Click="SpecificShareGame_Click"/>
                                <MenuFlyoutSeparator />
                                <MenuFlyoutItem Text="Enter game ID" Click="SpecificGameID_Click"/>
                                <MenuFlyoutItem Text="Enter random seed" Click="SpecificRandomSeed_Click"/>
                            </MenuFlyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>
                    <AppBarSeparator Visibility="{Binding LargePageElementVisible}"/>
                    <AppBarButton x:Name="ButtonRestart" Icon="RepeatAll" Label="Restart" Click="ButtonRestart_Click"/>
                    <AppBarButton x:Name="ButtonSolve" Icon="Directions" Label="Solve" Click="ButtonSolve_Click"/>
                </StackPanel>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="2" HorizontalAlignment="Right">
                    <AppBarButton x:Name="ButtonSettings" Label="Settings" Icon="Setting" Click="ButtonSettings_Click"/>
                    <AppBarButton x:Name="ButtonHelp" Label="Help" Icon="Help" Click="ButtonHelp_Click" Visibility="{Binding LargePageElementVisible}"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
</Page>
